<!--
 * @description: 编辑薪资页面
 * @Author: Coder
 * @Date: 2019-12-10 11:29:54
 * @LastEditors: Coder
 -->
<template>
  <div>
    <a-drawer
      title="编辑员工薪资"
      placement="right"
      :closable="false"
      destroyOnClose
      @close="onClose"
      :visible="visible"
      :width="540"
      style="position:relative"
    >
      <!-- 添加按钮 -->
      <a-button size="small" class="tc-theme ptr" @click="addUserInfo">
        添加
      </a-button>
      <!-- 展示员工信息档案 -->
      <a-form>
        <div class="form_item bg_gray mb20">员工档案信息</div>
        <a-form-item label="姓名 :" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
          <a-input :value="obj.name" disabled />
        </a-form-item>
        <a-form-item label="部门 :" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
          <a-input :value="obj.depName" disabled />
        </a-form-item>
      </a-form>
      <!-- 员工薪资信息 -->
      <div v-for="(item, i) in obj.data" :key="i + item">
        <div class="form_item bg_gray mb20">
          员工薪资信息
          <span class="f_r" v-if="choseItem === item.id">
            <a-button class=" btn_bag" @click="saveDetail(i)">保存</a-button>
            <a-button @click="cancleChose(i)">取消</a-button>
          </span>
          <span class="f_r" v-else>
            <a-button type="primary" @click="editor(item)">编辑</a-button>
            <a-button @click="del(item.id)">删除</a-button>
          </span>
        </div>
        <a-form>
          <a-form-item label="生效日期" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
            <a-date-picker
              :disabled="choseItem !== item.id"
              @change="effectiveDate"
              style="width: 100%"
              :defaultValue="moment(item.effectiveDate)"
            />
          </a-form-item>
          <a-form-item label="调整原因" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
            <a-input v-model="item.changeReason" :disabled="choseItem !== item.id" placeholder="输入金额" />
          </a-form-item>
          <a-form-item label="是否有效" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
            <a-select
              :disabled="choseItem !== item.id"
              placeholder="选择生效"
              @select="item.effectiveStatus = $event"
              :defaultValue="!!item.effectiveStatus ? '是' : '否'"
            >
              <a-select-option value="true">是</a-select-option>
              <a-select-option value="false">否</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="基本工资" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
            <a-input v-model="item.salaryBasic" :disabled="choseItem !== item.id" placeholder="输入金额" />
          </a-form-item>
          <a-form-item label="调整至 :" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
            <a-input v-model="item.salaryNew" :disabled="choseItem !== item.id" placeholder="输入金额" />
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { Wages, Files } from "@/api/wages/index";

export default {
  name: "SideDialog",

  props: {
    options: {
      type: Object,
      default: () => ({
        show: true,
        obj: {
          type: Object,
          default: {
            data: []
          }
        }
      })
    }
  },
  data() {
    return {
      visible: false,
      obj: {},
      choseItem: "",
      /* 是否是添加新数据状态 */
      isAddList: false,
      /* 添加调薪 */
      addList: {
        companyId: this.$store.state.hr.companyId,
        changeReason: "调岗调薪",
        effectiveDate: new Date(),
        effectiveStatus: true,
        empId: "",
        gmtCreate: new Date().getTime(),
        gmtModified: new Date().getTime(),
        id: "",
        remark: "调岗调薪",
        salaryBasic: "",
        salaryNew: ""
      }
    };
  },

  watch: {
    options: {
      handler(newVal) {
        this.visible = newVal.show;
        this.obj = newVal.obj;
        this.obj.data.forEach(item => {
          item.salaryNew = item.salaryNew / 100;
          item.salaryBasic = item.salaryBasic / 100;
        });
      }
    }
  },

  methods: {
    /* 获取编辑列表 */

    /* 取消选择 */
    cancleChose(i) {
      if (this.obj.data[i].id) {
        this.choseItem = "";
      } else {
        this.visible = false;
      }
    },
    // 关闭弹窗
    onClose() {
      this.visible = false;
    },
    // 添加userInfo
    addUserInfo() {
      this.choseItem = "";
      this.isAddList = true;
      this.obj.data.unshift(this.addList);
      this.obj.data[0].empId = this.obj.id;
      this.obj.data[0].salaryBasic = "";
      this.obj.data[0].salaryNew = "";
      this.obj.data[0].id = "";
    },
    // 选择生效日期
    effectiveDate(val) {
      this.addList.effectiveDate = val._d;
    },
    /* 是否生效 */
    effectiveStatus(e) {
      this.addList.effectiveStatus = e;
    },
    /* 保存编辑后的调薪 */
    saveDetail(i) {
      this.addList.salaryBasic = this.addList.salaryBasic * 100;
      this.addList.salaryNew = this.addList.salaryNew * 100;
      if (this.isAddList && this.addList.id === "") {
        Wages({
          url: Files.postEmployList,
          method: "POST",
          data: this.addList
        }).then(data => {
          data.success ? this.$notification["success"]({ message: "新增成功" }) : null;
        });
      } else {
        Wages({
          url: Files.postEmployList,
          method: "PUT",
          data: this.addList
        }).then(data => {
          data.success ? this.$notification["success"]({ message: "修改成功" }) : null;
        });
      }
      this.visible = false;
      this.choseItem = "";
    },

    /* 编辑item */
    editor(item) {
      this.addList = item;
      this.choseItem = item.id;
      this.isAddList = true;
    },

    /* 删除item */
    del(id) {
      const _this = this;
      this.$confirm({
        title: "提示",
        content: "确定删除?",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          Wages({
            url: Files.deleteEmpInfo + id,
            method: "DELETE"
          }).then(() => {
            _this.visible = false;
            _this.$notification["success"]({ message: "删除成功" });
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.f_r {
  float: right;
  margin-right: 12px;
}
.ptr {
  position: relative;
  top: -64px;
  left: 435px;
}
.form_item {
  padding-left: 20px;
  height: 48px;
  line-height: 48px;
}
</style>
